<template>
    <view class="switch-container" @click="toggleSwitch">
        <view class="switch-track" :class="{ 'active': isActive }">
            <view class="switch-thumb" :style="thumbPosition"></view>
        </view>
    </view>
</template>

<script setup lang="js">
import { computed } from 'vue'

const props = defineProps({
    modelValue: Boolean
})

const emit = defineEmits(['update:modelValue', 'change'])

const isActive = computed(() => props.modelValue)
const thumbPosition = computed(() => ({ left: isActive.value ? '36rpx' : '2rpx' }))

const toggleSwitch = (e) => {
    e.stopPropagation()
    const newValue = !props.modelValue
    emit('update:modelValue', newValue)
    emit('change', newValue)
}
</script>

<style lang="scss" scoped>
.switch-container {
    display: inline-flex;
    padding: 8rpx;
}

.switch-track {
    width: 68rpx;
    height: 36rpx;
    border-radius: 18rpx;
    background-color: #e0e0e0;
    position: relative;
    transition: background-color 0.3s;

    &.active {
        background-color: #333;

        .switch-thumb {
            background-color: #DBF046;

        }
    }
}

.switch-thumb {
    position: absolute;
    top: 4rpx;
    width: 28rpx;
    height: 28rpx;
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
    transition: left 0.3s ease-in-out;
}
</style>